<!DOCTYPE html>
<html>
<head>
	<title>Groepen</title>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div class="popoutElement" id="pop-profile">
        <h1 class="h1-pop-profile">Profile</h1>
	        <script id="profileTemplate" type="text/x-handlebars-template">
				<table>
					<tr>
						<td style="width:150px"><b>Naam:</b></td>
						<td>{{fullname}}</td>
					</tr>
					<tr>
						<td><b>Nickname:</b></td>
						<td>{{nickname}}</td>
					</tr>
					<tr>
						<td><b>Mobiel nummer:</b></td>
						<td><a href="tel:{{mobile}}">{{mobile}}</a></td>
					</tr>
					<tr>
						<td><b>Backup nummer:</b></td>
						<td><a href="tel:{{backup}}">{{backup}}</a></td>
					</tr>
				</table>
			</script>
        <div class="lower">
            <a onClick="jsgroups.pop_profile();"><span data-icon="-" aria-hidden="true"></span> Cancel</a>
        </div>
    </div>

	<div class="popoutElement" id="pop-new-group">
        <h1>Create a new group</h1>
        <div class="content">
            <h2>The name for this group</h2>
			<input id="groupname" maxLength="25" name="groupname" type="text" placeholder="Group name" />
            <div class="contacts contacts-select">
				<script class="contactsTemplate" type="text/x-handlebars-template">
					<div id="{{id}}"  class="contact">
						{{#if hasApp}}
							{{#if self}}
							{{else}}
								<span><input id="{{idgebruiker}}" class="contactCheckbox" type="checkbox"></span>
								<span>{{naam}}</span>
							{{/if}}
						{{/if}}
					</div>
				</script>
			</div>
        </div>
        <div class="lower">
            <a onClick="jsgroups.pop_tgl_newGroup();"><span data-icon="-" aria-hidden="true"></span> Cancel</a>
            <a class="myalarmsubmit saveGroup"><span data-icon="/" aria-hidden="true" class="saveGroup" ></span> Accept</a>
        </div>
    </div>

	<div class="popoutElement" id="pop-change-group">
        <h1>Change group</h1>
        <div class="content">
            <h2>Group name</h2>
            <input type="text" id="groepsnaam" class="title" value"" />
            <h2>Group picture</h2>
            <img id="groepPic" src="#" class="cleafix"/>
            <input type="hidden" id="groepId" value="" />
            <div style="display: block;">
            	<a class="btn" onClick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Change picture</a>
            	<a class="btn" onClick="jsgroups.confirm_leave_group();">Leave group</a>
            	<a class="btn" onClick="jsgroups.pop_tgl_delete_group();">Delete group</a>
            </div>
        </div>
        <div class="lower">
            <a onClick="jsgroups.pop_tgl_change_group();"><span data-icon="-" aria-hidden="true"></span> Cancel</a>
            <a class="saveChangedGroup myalarmsubmit"><span data-icon="/" aria-hidden="true"></span> Accept</a>
        </div>
    </div>

    <div class="popoutElement" id="pop-delete-group">

	        <h1>Delete group</h1>
	        <div class="content">
	            <h2>Do you really want to delete</h2>
	            <span id="nameDeleteGroup"></span>
	        </div>
	        <div class="lower">
	            <a onClick="jsgroups.pop_tgl_delete_group();"><span data-icon="-" aria-hidden="true"></span> No</a>
	            <a onClick="jsgroups.delete_groep();"><span data-icon="/" aria-hidden="true"></span> Yes</a>
	        </div>
    </div>

	<div class="popoutElement" id="pop-new-members pop_select_members">
        <h1>Add member(s)</h1>
        <div class="content">
            <h2>Choose members</h2>
            <div id="members">
				<script class="membersTemplate" type="text/x-handlebars-template">
					<div id="{{id}}" class="member gebruiker{{idgebruiker}}">
						{{#if hasApp}}
							{{#if self}}
							{{else}}
								<span><input id="{{idgebruiker}}" class="memberCheckbox" type="checkbox"></span>
								<span>{{naam}}</span>
							{{/if}}
						{{/if}}
					</div>
				</script>
				<input name="groupId" id="groupId" value="" type="hidden"/>
			</div>
        </div>
        <div class="lower">
            <a onClick="jsgroups.pop_tgl_newMembers();"><span data-icon="-" aria-hidden="true"></span> Cancel</a>
            <a class="myalarmsubmit saveNewMembers"><span data-icon="/" aria-hidden="true" class="saveNewMembers"></span> Accept</a>
        </div>
    </div>

	<div class="header-container">
		<header class="clearfix">
			<h1 class="title">Groups</h1>
		</header>
	</div>
	<div class="main-container">
		<div class="wrapper clearfix" id="content">
			<ul class="blocks invites" id="invites">
				<script id="invitesTemplate" type="text/x-handlebars-template">
					<li id="{{id}}">
						<span class="icon"><span data-icon="R" aria-hidden="true"></span></span>
						<div class="buttons">
							<div class="rejectbutton" style="display: inline-block">
								<span data-icon="\" aria-hidden="true"></span>
							</div>
							<div class="acceptbutton" style="display: inline-block">
								<span data-icon="." aria-hidden="true"></span>
							</div>
						</div>
						You've been invited to join a new group by
						<span class="leader">{{beheerder}}</span> to join the group
						<span class="groupname">{{groepsnaam}}</span>
					</li>
				</script>
			</ul>
			<ul class="blocks groups" id="groups">
				<script id="groupsTemplate" type="text/x-handlebars-template">
					{{#if leader}}
						<li id="{{id}}" class="leader">
					{{else}}
						<li id="{{id}}" class="member">
					{{/if}}
						<div class="inner-content-wrapper clearfix">
							{{#if leader}}
							<img src="http://www.remcovdk.com/groupalarm/grouppic.php?group={{id}}" class="group-image" onClick="jsgroups.pop_tgl_change_group({{id}},'{{groupname}}');" />
							{{else}}
							<img src="http://www.remcovdk.com/groupalarm/grouppic.php?group={{id}}" class="group-image" />
							{{/if}}
							<div class="rightSide">
								<div class="group-alarm-first-up">
									<span data-icon="P" aria-hidden="true" class="icon"></span>
									<span class="date"></span><span class="time"></span>
								</div>
								<ul class="buttons">
									<li><span data-icon="U" aria-hidden="true"></span></li>
									<li><span data-icon="P" aria-hidden="true"></span></li>
									{{#if leader}}
									<li onclick="jsgroups.pop_tgl_newMembers({{id}});"><span data-icon="+" aria-hidden="true"></span></li>
									{{/if}}
								</ul>
							</div>
							<div class="group-name">{{#if leader}}<span data-icon="R" aria-hidden="true"> </span>{{/if}}{{groupname}}</div>

						</div>
						<div class="members" style="display: none;">
							<ul class="blocks group-members-large">

							</ul>
						</div>
						<div class="group-alarms" style="display: none;">
							<h2>Alarms</h2>
							<ul class="blocks alarms">
								{{#if leader}}
								<li class="new-alarm">
									<h1><span data-icon="+" aria-hidden="true"></span> Add alarm</h1>
								</li>
								{{/if}}
							</ul>
						</div>
					</li>
				</script> <!--/END OF GROEPSTEMPLATE -->
				<li class="new-group" onClick="jsgroups.pop_tgl_newGroup();">
					<div class="inner-content-wrapper">
						<h1><span data-icon="+" aria-hidden="true"></span> New Group</h1>
					</div>
				</li>
			</ul>
		</div> <!-- #main -->
	</div> <!-- #main-container -->

	<div class="footer-container">
		<footer>
			<nav id="footer-nav">
				<ul>
					<li>
						<a href="contact.html">
							<img src="images/contacten.png" />
							<span>Contacts</span>
						</a>
					</li>
					<li>
						<a href="wekkers.html">
							<img src="images/wekkers.png" />
							<span>Alarms</span>
						</a>
					</li>
					<li class="active">
						<a href="groepen.html">
							<img src="images/groepen_a.png" />
							<span>Groups</span>
						</a>
					</li>
					<li>
						<a href="instellingen.html">
							<img src="images/instellingen.png" />
							<span>Settings</span>
						</a>
					</li>
				</ul>
			</nav>
		</footer>
	</div>

	<script id="groepsAlarmTemplate" type="text/x-handlebars-template">
		{{#if leader}}
		<li class="alarm {{#if set}}active{{else}}inactive{{/if}} clearfix" id="{{id}}">
			<div class="popoutElement alarm_settings" id="pop_alarm_settings-{{id}}">
				<h1>Alarm options</h1>
				<div class="content">
					<div class="new-alarm-block setTime ealarm">
						<select id="hour">{{setHours hour}}</select> : <select id="min">{{setMins min}}</select>
					</div>
					<ul class="days">
						{{frepDays repDay}}
					</ul>
					<h3>Event Title</h3>
					<input type="text" class="title" value="{{title}}" />
					<h3>Description</h3>
					<input type="text" class="description" value="{{description}}" />
					<h3>Personal alarm</h3>
					<div class="new-alarm-block palarm setTime">
						<select id="hour">{{setHours hour}}</select> : <select id="min">{{setMins min}}</select>
					</div>
				</div>
				<div class="lower">
					<a class="alarm-settings"><span data-icon="-" aria-hidden="true"></span> Cancel</a>
					<a class="alarmsubmit"><span data-icon="/" aria-hidden="true"></span> Accept</a>
				</div>
			</div>
			<div class="inner-content-wrapper clearfix">
				<span data-icon="P" aria-hidden="true" class="icon"></span>
				<div class="showTime">
					<span class="time">{{hour}}:{{min}}</span><span class="smallTime"></span>
					<span class="title" style="font-weight: bold; font-size: 14px; display:block; margin-top: -4px; margin-bottom:4px;">{{title}}</span>
					<ul class="showDates">
						{{frepDays2 repDay}}
					</ul>
				</div>
				<div class="rightSide">
					<div class="options">
						<a class="delete-alarm"><span data-icon="'" aria-hidden="true"></span></a>
						<a class="set-alarm {{#if set}}active{{else}}inactive{{/if}}"><span data-icon="J" aria-hidden="true"></span></a>
						<a class="alarm-settings"><span data-icon="S" aria-hidden="true"></span></a>
						<a class="myAlarmSet"><span data-icon="{{#if pset}}/{{else}}-{{/if}}" aria-hidden="true"></span></a>
					</div>
				</div>
			</div>
		</li>
		{{else}}
			{{#if set}}
				<li class="alarm {{#if pset}}active{{else}}inactive{{/if}} clearfix" id="{{id}}">
					<div class="popoutElement alarm_settings clearfix" id="pop_alarm_settings-{{id}}">
						<h1>Alarm options</h1>
						<div class="content">
							<h2>When do you want to wake up for this event?</h2>
							<div class="new-alarm-block palarm setTime">
								<select id="hour">{{setHours hour}}</select> : <select id="min">{{setMins min}}</select>
							</div>
						</div>
						<div class="lower">
							<a class="alarm-settings"><span data-icon="-" aria-hidden="true"></span> Cancel</a>
							<a class="myalarmsubmit"><span data-icon="/" aria-hidden="true"></span> Accept</a>
						</div>
					</div>
					<div class="inner-content-wrapper">
						<span data-icon="P" aria-hidden="true" class="icon"></span>
						<div class="rightSide">
							<div class="options">
								<a class="alarm-settings"><span data-icon="S" aria-hidden="true"></span></a>
								<a class="myAlarmSet"><span data-icon="{{#if pset}}/{{else}}-{{/if}}" aria-hidden="true"></span></a>
							</div>
						</div>
						<div class="showTime">
							<span class="time">{{hour}}:{{min}}</span><span class="smallTime">({{phour}}:{{pmin}})</span>
							<span class="title" style="font-weight: bold; font-size: 14px; display:block; margin-top: -4px; margin-bottom:4px;">{{title}}</span>
							<ul class="showDates">
								{{frepDays2 repDay}}
							</ul>
						</div>

					</div>
				</li>
			{{/if}}
		{{/if}}
	</script>


	<script id="groepsMembersTemplate" type="text/x-handlebars-template">
		<li id="{{idgebruiker}}" class="members clearfix">
			<div class="inner-content-wrapper clearfix">
				<img style="height:50px;width:50px;" src="http://www.remcovdk.com/groupalarm/profilepic.php?user={{idgebruiker}}" class="picture" />
				<div class="rightSide">
					<div class="group-alarm-first-up">
						<span data-icon="P" aria-hidden="true" class="icon"></span>
						<span class="memberEventTitle">Title</span><span class="memberEventAlarm time"></span>
					</div>
					<div class="options">
						<a class="profileKlick"><span data-icon="U" aria-hidden="true"></span></a>
						{{#if groepLeader}}
							{{#if leader}}
							{{else}}
							<a class="giveLeader"><span data-icon="R" aria-hidden="true"></span></a>
							<a class="removeMember"><span data-icon="'" aria-hidden="true"></span></a>
							{{/if}}
						{{/if}}
					</div>
				</div>
				<div class="meta-data">
					<span class="name">{{placeStar groepInfo}} {{fullname}}</span>
					<!--<span class="status">His/Her alarm set on <strong class="memberEventAlarm">13:37</strong> is <strong class="memberEventActive"></strong> for <strong class="memberEventTitle">Event title</strong></span>-->
				</div>
			</div>
		</li>
	</script>

	<!-- here comes the javascript -->
	<script src="js/jquery-min.js"></script>
	<script src="js/cordova-2.0.0.js"></script>
	<script src="js/plugins.js"></script>
	<script src="js/handlebars.js"></script>
	<script src="js/ajax.js"></script>
	<script src="js/imei.js"></script>
	<!-- <script src="js/getGroups.js"></script> -->
	<!--<script src="js/alarm_everywere.js"></script>-->
	<script src="js/groupalarm.js"></script>
	<script src="js/groups.js"></script>
	<script src="js/newgroup.js"></script>
	<script src="js/invites.js"></script>
	<script src="js/picgroep.js"></script>
</body>
</html>